<template>
  <el-card>
    <el-table :data="tableData">
      <el-table-column v-for="col in columns" :key="col.name" :prop="col.name" :label="col.label"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 移除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <r-form
      ref="form"
      style="text-align: left; width: 60%; margin-left: 20%"
      :columns="formProps.columns"
      :submit="formProps.submit"
      @submit="onFormSubmit"
      @change="onFormChange"
    ></r-form>

    <el-button :type="submit.type" @click="onTableSubmit()">{{ submit.name }}</el-button>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  props: {
    columns: {},
    submit: {},
    formProps: {}
  },
  computed: {},
  watch: {
    tableData() {
      this.$emit('tableChange', this.tableData)
    }
  },
  methods: {
    onFormSubmit(formData) {
      debugger
      this.tableData = [...this.tableData, { ...formData }]
    },
    onFormChange(formData) {
      this.$emit('formChange', formData)
    },
    onTableSubmit() {
      if (this.tableData.length <= 0) {
        this.$message({
          message: '数据为空',
          type: 'warning'
        })
        return
      }

      this.$emit('multiSubmit', this.tableData)
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>
